<template>
  <div class="header">
    <ul class="left">
      <li>
        <a href="">博客</a>
      </li>
      <li>
        <a href="">CSDN</a>
      </li>
    </ul>
    <div class="right">
      <el-popover
        placement="top-start"
        width="100"
        trigger="hover"
      >
        <el-button style="width: 100%;" type="text" size="mini">安全退出</el-button>
        <el-avatar slot="reference"
                   src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
      </el-popover>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Header"
  }
</script>

<style lang="less">
  .header {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    line-height: 60px;
    box-shadow: 0px 2px 10px #ddd;
    position: fixed;
    background: white;
    z-index: 100;
    .left {
      width: 50%;
      display: flex;
      padding-left: 20px;
      li {
        margin: 0 10px;
      }
    }
    .right {
      width: 50%;
      margin-right: 60px;
      margin-top: 10px;
    }
  }
</style>